<template>
    <div class="box">
        <div class="header">
            <van-icon name="arrow-left" size="28" @click="$router.go(-1)" />

            <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @search="onSearch" @focus="isShow = false">
            </van-search>
            <van-icon name="ellipsis" size="34" v-if="isShow" />
            <div class="txt" @click="onSearch" v-else>搜索</div>
        </div>

        <div class="main">
            <div class="tuijian">
                <p>热门搜索</p>
                <van-grid :gutter="10">
                    <van-grid-item v-for="(item, index) in hotword" :key="index">{{ item.keyword }}</van-grid-item>
                </van-grid>
            </div>

            <div class="top10">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onSearch">
                    <!-- ----两套布局---- -->
                    <ul class="prolist2">
                        <li v-for="(item, index) in dosearch" :key="index">
                            <img width="100%" :src="item.img1">
                            <div>
                                <h4>{{ item.proname }}</h4>
                                <p>￥<span>{{ item.originprice }}</span></p>
                            </div>
                        </li>
                    </ul>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>
import { doSearch, hotWord } from "../api/pro";

import Vue from 'vue';
import { Icon, Grid, GridItem } from 'vant';

Vue.use(Icon);
Vue.use(Grid);
Vue.use(GridItem);
export default {
    data() {
        return {
            value: '',
            isShow: true,
            hotword: [],
            loading: false,
            finished: false,
            dosearch: [],
            count:1
        }
    },
    methods: {
        onSearch() {
            this.loading = true
            setTimeout(() => {
                //  实现 -- 长度不等于0 ??
                doSearch({ count:1, limiNum: 3, keyword: this.value }).then((res) => {
                    this.loading = false
                    console.log(res.data.data);
                    this.dosearch = res.data.data

                    if (res.data.data.length == 0) {
                        this.finished = true
                    } else {
                        this.dosearch = [...this.dosearch, ...res.data.data]
                        this.count++
                    }
                });
            }, 1000);
        },
    },

    created() {
        hotWord().then(res => {
            // console.log(res);
            this.hotword = res.data.data
        })
    }

}
</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
}

.txt {
    width: 50px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    font-size: 18px;
    background-color: orangered;
    border-radius: 10px;

}

.main p {
    margin: 20px 0;
    font-size: 18px;
}

.top10 {
    margin-top: 0.1rem;
    min-height: 0.2rem;
    background-color: #fff;
}

.top10 ul li div h4 {
    font-weight: 400;
}

.top10 ul li div p {
    color: #ee0a24;
}

.top10 ul li div p span {
    font-size: 18px;
}

.prolist2 li div {
    padding-left: 10px;
}

.prolist2 li {
    display: flex;
}

.prolist2 li img {
    width: 30%;
    height: 0.8rem;
    border: 1px solid gray;
}

.prolist2 li div {
    flex: 1;
}
</style>